{% extends "myapp/hat.html" %}


{% block content%}

<style>
.custom-file-input:lang(en)~.custom-file-label::after{
        content: "Выбор";
}
</style>


<div class="container mt-3">
  <h2>Загрузка формы</h2>
  <p></p>
  <form action="/action_page.php">
    <p>Собственный файл:</p>
    <div class="custom-file mb-3">
      <input type="file" class="custom-file-input" id="customFile" name="filename">
      <label class="custom-file-label" for="customFile">Выберите файл</label>
    </div>

{#    <p>Default file:</p>#}
{#    <input type="file" id="myFile" name="filename2">#}

    <div class="mt-3">
      <button type="submit" class="btn btn-primary">Отправить</button>
    </div>
  </form>
</div>

<script>
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>


{% endblock content %}